<!--
 * @Descripttion: 
 * @version: 1.0.0
 * @Author: guoxiaomin
 * @Email: 1093556028@qq.com
 * @Date: 2019-08-20 10:38:02
 * @LastEditors: guoxiaomin
 * @LastEditTime: 2019-09-12 14:26:55
 -->
<style lang="less" scoped>
.home{
  .banner{
    width: 100%;
    height: 9rem;
    background: url(../../assets/web/bannerBj@2x.png) no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    .introduce{
      color: #FFFFFF;
      .txt1{
        font-weight: Bold;
        font-size: 0.6rem;
        line-height: 0.8rem;
      }
      .txt2{
        font-weight: bold;
        font-size: 0.48rem;
        line-height: 0.8rem;
      }
      .btnBox{
        border: 1px solid #FFFFFF;
        text-align: center;
        width: 1.91rem;
        height: 0.6rem;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 1.07rem;
        .txt{
          font-size: 0.18rem;
          color: #FFFFFF;
          margin-left: 0.11rem;
        }
        .icon{
          width: 0.18rem;
          height: 0.26rem;
        }
      }
    }
    .car{
      width: 7.61rem;
      height: 5.66rem;
      margin-left: 0.1rem;
    }
    .follow{
      width: 1.3rem;
      position: absolute;
      right: 0.85rem;
      bottom: 0.63rem;
      .wechat{
        width: 100%;
        height: 1.3rem;
      }
      .txt{
        font-size: 0.16rem;
        font-weight:400;
        color: #ffffff;
        text-align: center;
        padding-top: 0.12rem;
        width: 1.3rem
      }
    }
  }
  .serverBox{
    width: 100%;
    height: 9rem;
    background: url('../../assets/web/bannerYz@2x.png') no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    padding-top: 0.98rem;
    box-sizing: border-box;
    .leftBox{
      .serverIcon{
        width: 0.47rem;
        height: 0.49rem;
      }
      .title{
        font-weight: bold;
        font-size: 0.6rem;
        color: #333333;
        margin-top: 0.33rem;
        .red{
          width: 0.22rem;
          height: 0.22rem;
          background: #FD371C;
          border-radius: 50%;
          display: inline-block;
          margin-left: 0.05rem;
        }
      }
      .enTitle{
        font-size: 0.36rem;
        color: #ffffff;
        font-weight:400;
        margin-top: 0.31rem;
      }
      .goodnessList{
        margin-top: 1.11rem;
        display: flex;
        .line{
          .item{
            .cn{
              color: #000000;
              font-size: 0.18rem;
              font-weight: bold;
            }
            .en{
              font-size: 0.24rem;
              color:#FFFFFF;
              font-weight:400;
            }
          }
          .item1{
            margin-top: 0.4rem;
          }
        }
        .line1{
          margin-left: 0.66rem;
        }
      }
      .contactBox{
        font-size: 0.22rem;
        color: #333333;
        line-height: 0.22rem;
        height: 0.22rem;
        margin-top: 0.92rem;
        .icon{
          width: 0.38rem;
          height: 0.22rem;
          margin-left: 0.11rem;
          vertical-align: middle;
        }
      }
    }
    .rightBox{
      margin-left: 1.59rem;
      padding-top: 0.78rem;
      .line{
        display: flex;
        .item{
          width: 3.04rem;
          height: 3.04rem;
          background-size: 100% 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          position: relative;
          .icon{
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 0.7rem;
          }
          .txtBox{
            height: 1.08rem;
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            background:rgba(255,255,255,0.88);
            text-align: center;
            padding-top: 0.21rem;
            box-sizing: border-box;
          }
          .mainTxt{
            font-weight: bold;
            font-size: 0.3rem;
            color: #FFFFFF;
            display: block;
            font-weight: bold;
          }
          .subTxt{
            font-size: 0.18rem;
            color: #FFFFFF;
            font-weight:400;
            margin-top: 0.07rem;
            display: block;
          }
        }
        .item1{
          background: url('../../assets/web/imageMk@2x.png') no-repeat;
          background-size: 100% 100%;
          .icon{
            width: 0.76rem;
            height: 0.87rem;
          }
          .txtBox{
            .mainTxt{
              color:#000000;
            }
            .subTxt{
              color: #000000;
            }
          }
        }
        .item2{
          background: url('../../assets/web/imageFk@2x.png') no-repeat;
          background-size: 100% 100%;
          .icon{
            width: 0.87rem;
            height: 0.73rem;
            top: 0.85rem;
          }
           .txtBox{
             background: rgba(253,55,26,0.78);
          }
        }
        .item3{
          background: url('../../assets/web/imageEd@2x.png') no-repeat;
          background-size: 100% 100%;
          .icon{
            width: 0.84rem;
            height: 0.59rem;
            top: 1.03rem;
          }
          .txtBox{
            background:rgba(253,55,26,0.88);
          }
        }
        .item4{
          background: url('../../assets/web/imageZy@2x.png') no-repeat;
          background-size: 100% 100%;
          .icon{
            width: 0.88rem;
            height: 0.64rem;
            top: 1.02rem;
          }
          .txtBox{
            background:rgba(255,255,255,0.88);
            .mainTxt{
              color:#000000;
            }
            .subTxt{
              color: #000000;
            }
          }
        }
      }
    }
  }
  .processBox{
    width: 100%;
    height: 8.99rem;
    background: url('../../assets/web/bannerSq@2x.png') no-repeat;
    background-size: 100% 100%;
    position: relative;
    .title{
      margin-left: 3.6rem;
      padding-top: 0.99rem;
      .zh{
        color: #333333;
        font-size: 0.6rem;
        font-weight: bold;
      }
      .en{
        color: #333333;
        font-size: 0.36rem;
        font-weight:400;
        line-height: 0.48rem;
        padding-left: 0.05rem;
      }
    }
    .steps{
      display: flex;
      align-items: center;
      padding: 1.37rem 4.47rem 0 4.8rem;
      .step{
        width: 0.8rem;
        height: 0.8rem;
        border: 0.08rem solid #FD371A;
        border-radius: 50%;
        color: #FD371A;
        font-size: 0.36rem;
        font-weight: bold;
        text-align: center;
        line-height: 0.8rem;
        .num{
          width: 100%;
          height: 100%;
        }
        .txt{
          font-size: 0.24rem;
          color: #333333;
          font-weight:bold;
          margin-top: 0.36rem;
          text-align: center;
          white-space : nowrap;
        }
      }
      .line{
        background: #FD371A;
        flex-grow: 1;
        height: 0.08rem;
      }
    }
    .contactUs{
      position: absolute;
      right: 3.59rem;
      bottom: 1.01rem;
      .ctIcon{
        width: 1.97rem;
        height: 0.79rem;
      }
      .phone{
        color: #333333;
        font-size: 0.24rem;
        font-weight: bold;
        width: 1.97rem;
        text-align: center;
        margin-top: 0.13rem;
      }
    }
  }
}
</style>

<template>
  <div class="home">
    <div class="banner">
      <div class="introduce">
        <p class="txt1">签约客户赎车后</p>
        <p class="txt2">即可领取精美伴</p>
        <p class="txt2">手礼一份</p>
        <div class="btnBox pointer" @click="contactClicked">
          <img src="../../assets/web/iconSb@2x.png" alt="" class="icon">
          <span class="txt">联系我们</span>
        </div>
      </div>
      <img src="../../assets/web/carQy@2x.png" alt="" class="car">
      <div class="follow">
         <img src="../../assets/web/WechatIMG10.jpeg" alt="" class="wechat">
         <p class='txt'>-关注我们-</p>
      </div>
    </div>
    <div class="serverBox">
      <div class="leftBox">
        <img src="../../assets/web/iocnHg@2x.png" alt="" class="serverIcon">
        <p class="title">
          <span class="t">一站式专业服务</span>
          <span class="red t"></span>
        </p>
        <div class="enTitle">
          <p>CONVENIENCE</p>
          <p>SERVICE</p>
        </div>
        <div class="goodnessList">
          <div v-for="(line, lineIndex) in goodness" :key="lineIndex" :class="['line', 'line'+lineIndex ]">
            <div :class="['item', 'item'+index]" v-for="(item, index) in line" :key="index">
              <p class="cn">{{item.name}}</p>
              <p class="en" style="marginTop:0.11rem;">{{item.en}}</p>
            </div>
          </div>
        </div>
        <div class="contactBox pointer"  @click="contactClicked">
          <span class="txt">联系我们</span>
          <img src="../../assets/web/iconJtz@2x.png" alt="" class="icon"> 
        </div>
      </div>
      <div class="rightBox">
        <div class="line">
          <div class="item item1">
            <img src="../../assets/web/iconMk@2x.png" alt="" class="icon">
            <div class="txtBox">
              <span class="mainTxt">门槛低</span>
              <span class="subTxt">有车就能做</span>
            </div>
            
          </div>
          <div class="item item2">
            <img src="../../assets/web/iconFk@2x.png" alt="" class="icon">
            <div class="txtBox">
            <span class="mainTxt">放款快</span>
            <span class="subTxt">手续便捷当天放款</span>
            </div>
          </div>
        </div>
         <div class="line">
          <div class="item item3">
             <img src="../../assets/web/iconEd@2x.png" alt="" class="icon">
             <div class="txtBox">
             <span class="mainTxt">额度高</span>
             <span class="subTxt">十万抵十万</span>
             </div>
          </div>
          <div class="item item4">
             <img src="../../assets/web/iconZy@2x.png" alt="" class="icon">
             <div class="txtBox">
             <span class="mainTxt">专业安全</span>
             <span class="subTxt">期限灵活不押车</span>
             </div>
          </div>
        </div>
      </div>
    </div>
    <div class="processBox">
      <div class="title">
        <p class="zh">申请流程</p>
        <p class="en" style="marginTop:0.19rem;">APPLICATION</p>
        <p class="en">PROCESS</p>
      </div>
      <div class="steps">
        <div class="step">
          <p class="num">1</p>
          <p class="txt">电话沟通</p>
        </div>
        <div class="line"></div>
        <div class="step">
          <p class="num">2</p>
          <p class="txt">提交资料</p>
        </div>
        <div class="line"></div>
        <div class="step">
          <p class="num">3</p>
          <p class="txt">签约</p>
        </div>
        <div class="line"></div>
        <div class="step">
          <p class="num">4</p>
          <p class="txt">完成办理</p>
        </div>
      </div>
      <div class="contactUs pointer"  @click="contactClicked">
        <img src="../../assets/web/buttonLx@2x.png" alt="" class="ctIcon">
        <p class="phone">010-87506918</p>
      </div>
    </div>
    <AskMoney :isShow="isShowAskMoney" @closeAsk='askSuccess'></AskMoney>
  </div>
</template>

<script>
import AskMoney from '../../components/askMoneyBox'
export default {
  name: 'Home',
  data() {
    return {
      isShowAskMoney: false,
      goodness: [
        [{
          name: '专业',
          en: 'SPECIALITY'
        },
        {
          name: '高效',
          en: 'HIGH EFFICIENCY'
        }],
        [{
          name: '安全',
          en: 'SAFETY'
        },
        {
          name: '便捷',
          en: 'CONVENIENT'
        }]
      ]
    }
  },
  components: {
    AskMoney
  },
  methods: {
    contactClicked() {
      this.isShowAskMoney = true
    },
    askSuccess() {
      this.isShowAskMoney = false
    }
  }
}
</script>
